<template>
	<view class="home" :style="{paddingTop:h+'px'}">
		<!-- 轮播 -->
		<swiper :indicator-dots="true">
			<swiper-item v-for="item in banner" :key="item.id">
				<image :src="item.pic" class="img" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- 根据分类id查询分类 -->
		<view class="section-kinds">
			<view class="kind-block" v-for="item in classify " :key="item.id" @tap="kinds(item.id)">
				<image :src="item.icon" class="icon-kind"></image>
				<view class="kind-text">{{item.name}}</view>
			</view>
		</view>
		
		<!-- 广告喇叭 -->
		<view class="section-notify">
			<image src="../../static/icons/laba.png" class="icon-notify"></image>
			<text class="text">限时活动</text>
			 <swiper class="swiper1" vertical="true" autoplay="true" circular="true" style="width: 400rpx; height: 38rpx; margin-left: 30rpx;" >
				<swiper-item>
					清仓大处理,路过看一下
				</swiper-item>
				<swiper-item>
					大处理,大处理
				</swiper-item>
			</swiper>
		</view>
		<!-- 热门推荐 -->
		<view class="section-series">
			<view class="common-title">
				<text class="title"> 热门推荐</text>
			</view>
			<view class="box" >
				<!-- 轮播 -->
				<swiper class="scroll-series" display-multiple-items=3>
					<swiper-item  v-for="item in hotListt" :key="item.id"  @tap="series(item.id)">
						<image :src="item.pic" class="img" mode="" style="width:104px; height: 88px;" ></image>
						<view class="cname">{{item.name}}</view>
					</swiper-item>
				</swiper>
			</view>
			
		</view>
		
		
		<!-- 新品推荐 -->
		<view class="section-series">
			<view class="common-title">
				<text class="title"> 新品推荐</text>
			</view>
			
			<view class="series-blockk">
				<view class="series-block" v-for="item in lejuLatest" :key="item.id" @tap="series(item.id)">
					<image class="image" :src="item.pic"></image>
					<view class="newProductBox">
						<view class="cname">{{item.name}}</view>
						<view class="ename">价格{{item.price}}</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 猜你喜欢-->
		<view class="section-series">
			<view class="common-title">
				<text class="title"> 猜你喜欢</text>
			</view>
			
			<view class="product-list">
				<view v-for="item in saleMost " :key="item.id" class="product-block"  @tap="series(item.id)">
					<image :src="item.pic" class="img"></image>
					<view class="text-area">
						<view class="gname">{{item.brandName}}</view>
						<view class="price-origin">
							<view class="price">¥{{item.price}}</view>
							<view class="origin">乐居</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>

	</view>
</template>

<script>
	import { bannerAds,findCategory,hotList ,lejuLatestProducts ,saleMostProducts } from "../../api/home/index.js"
	export default {
		data() {
			return {
					banner:[],   //轮播图
					h:0,   //胶囊距离
					classify:[],//根据分类id查询分类
					hotListt:[],//热门信息
					lejuLatest:[],//新品推荐
					saleMost:[],//猜你喜欢
			};
		},
		created( option ) {
			//胶囊距离
			// ifdef 让在特殊注释里面的代码仅在某一平台才会生效
			// #ifdef MP-WEIXIN
				var menu = uni.getMenuButtonBoundingClientRect();
				// console.log("获取到的按钮信息为",uni.getMenuButtonBoundingClientRect())
				// var _this = this;
				this.h = menu.height + menu.top;
			// #endif
			//轮播图
			bannerAds()
			.then(res =>{
				// console.log(res);
				this.banner=res.data.items
			}),
			//根据分类id查询分类
			findCategory("1308336521604599809")
			.then(res=>{
				// console.log(res);
				this.classify=res.data.category.children
			}),
			// 热门信息
			hotList()
			.then(res=>{
				// console.log(res);
				this.hotListt=res.data.items
			})
			//新品推荐
			lejuLatestProducts()
			.then(res=>{
				// console.log(res);
				this.lejuLatest=res.data.productList
			})
			// 猜你喜欢
			saleMostProducts()
			.then(res=>{
				// console.log(res);
				this.saleMost=res.data.items
			})
		},
		methods:{
			series(all){
				console.log("点击了",all);
				uni.navigateTo({
					url:`../kind/list/info/info?id=${all}`
				})
			},
			kinds(all){
				uni.navigateTo({
					url:`../kind/list/list?id=${all}`
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.home{
		background-color: #F1ECE7;
		padding-top:var(--status-bar-height);
		overflow: hidden;
		.img{
			width: 100%;
		}
		//根据分类id查询分类
		.section-kinds{
			display: flex;
			margin: 60rpx auto;
			width: 100%;
			justify-content: space-around;
			.kind-block{
				    width: 120rpx;
				    text-align: center;
				.icon-kind{
					width: 80rpx;
					height: 80rpx;
					border-radius: 8rpx;
				}
				.kind-text{
					font-size: 16px;
					color: #3e3e3e;
					text-align: center;
				}
			}
		}
		//广告喇叭
		.section-notify{
			display: flex;
			align-items: center;
			width: 670rpx;
			height: 86rpx;
			margin: 40rpx auto;
			background-color: #fff;
			font-size: 28rpx;
		
			.icon-notify{
				margin-left: 10rpx;
				margin-right: 20rpx;
				width: 48rpx;
				height: 48rpx;
			}
			.text{
				font-weight: 600;
				color: orange;
			
			}
		
			
		}
		// 热门推荐
		.section-series{
			margin: 20rpx 20rpx;
			
			.common-title{
				font-size: 32rpx;
				color: #3e3e3e;
				letter-spacing: 2rpx;
				font-weight: 600;
				
			}
			.box{
				display: flex;
				margin: 20rpx 0;
				.scroll-series {
					width:100%;
					
					.cname{
						text-align: center;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					
					
				}
				
			}
			
		}
		//新品推荐
		.series-blockk{
				overflow: auto;
				display: flex;
			.series-block{
				border-radius: 20rpx;
				margin: 20rpx;
				display: flex;
				background-color: #FFFFFF;
				padding: 50rpx;
				
				.image{
				margin-right: 80rpx;
					width: 196rpx;
					height: 168rpx;
				}
				.newProductBox{
				
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 300rpx;
					font-size: 13px;
					color: #3e3e3e;
					letter-spacing: 0.5px;
					
				}
			}
			
		}
		// 猜你喜欢
		.product-list{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			.product-block{
				margin-top: 40rpx;
				width: 324rpx;
				background-color: #FFFFFF;
				.img{
					width: 100%;
					height: 238rpx;
				}
				.text-area{
					padding: 50rpx;
					.gname{
						color: #3e3e3e;
						line-height: 19px;
						margin-top: 4px;
						font-weight: 700;
					}
					.price-origin{
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}
		
	}
</style>
